<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>数据源列表 - 后台管理系统模板</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <meta name="keywords" content="SQL,后台模板,后台管理系统,浩瀚HTML模板">
    <meta name="description" content="一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
    <meta name="author" content="浩瀚">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/materialdesignicons.min.css" rel="stylesheet">
    <link href="css/style.min.css" rel="stylesheet">
</head>

<body>
    <div class="container-fluid p-t-15">

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">新增数据源</h4>
                    </div>
                    <div class="modal-body">

                        <form action="lyear_forms_elements.html" method="post" onsubmit="return false;">
                            <div class="form-group">
                                <label for="data-ip">服务器名称</label>
                                <input class="form-control" type="text" id="data-name" placeholder="输入服务器名称...">
                            </div>

                            <div class="form-group">
                                <label for="data-ip">服务器IP</label>
                                <input class="form-control" type="text" id="data-ip" placeholder="输入服务器IP...">
                            </div>

                            <div class="form-group">
                                <label for="data-snmp-port">SNMP端口</label>
                                <input class="form-control" type="text" id="data-snmp-port" placeholder="输入SNMP端口...">
                            </div>

                            <div class="form-group">
                                <label for="data-syslog-port">SYSLOG端口</label>
                                <input class="form-control" type="text" id="data-syslog-port"
                                    placeholder="输入SYSLOG端口...">
                            </div>

                            <div class="form-group">
                                <label for="data-mib">MIB版本</label>
                                <input class="form-control" type="text" id="data-mib" placeholder="输入设备mib版本...">
                            </div>

                            <div class="form-group">
                                <label for="data-com">COM版本</label>
                                <input class="form-control" type="text" id="data-com" placeholder="输入设备com版本...">
                            </div>
                        </form>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-toolbar clearfix">
                        <div class="toolbar-btn-action">
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                                新增
                            </button>
                        </div>
                    </div>
                    <div class="card-body">

                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>
                                            <label class="lyear-checkbox checkbox-primary">
                                                <input type="checkbox" id="check-all"><span></span>
                                            </label>
                                        </th>
                                        <th>编号</th>
                                        <th>服务器名</th>
                                        <th>服务器地址</th>
                                        <th>SNMP端口</th>
                                        <th>SYSLOG端口</th>
                                        <th>MIB版本</th>
                                        <th>COM版本</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="datasource-list">
                                    <!-- 动态数据将插入此处 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- 提示模态框 -->
    <div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="alertModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="alertModalLabel">操作提示</h4>
                </div>
                <div class="modal-body" id="alertModalBody">
                    <!-- 这里将显示具体的提示消息 -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 确认删除模态框 -->
    <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="confirmModalLabel">删除确认</h4>
                </div>
                <div class="modal-body" id="confirmModalBody">
                    <!-- 这里显示确认消息 -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="confirmModalYes">确定</button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/main.min.js"></script>
    <script type="text/javascript">


        // 提交新增数据源的表单
        function submitNewDataSource() {
            var data = {
                serverName: $('#data-name').val(),
                address: $('#data-ip').val(),
                snmpPort: $('#data-snmp-port').val(),
                syslogPort: $('#data-syslog-port').val(),
                mibVersion: $('#data-mib').val(),
                comVersion: $('#data-com').val()
            };

            $.ajax({
                url: "/server/create",
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify(data),
                success: function (response) {
                    if (response && response.code === 200) {
                        $('#myModal').modal('hide');
                        fetchDataSourceList();
                        displayAlertModal('服务器添加成功');
                    } else {
                        // 处理错误或者显示一些消息
                        displayAlertModal('服务器添加失败:' + (response && response.msg ? response.msg : '未知错误'));
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    // 请求失败时的处理逻辑
                    displayAlertModal('添加服务器请求失败:' + textStatus);
                }
            });
        }
        // 请求数据源列表
        function fetchDataSourceList() {
            $.ajax({
                url: "/server/list",
                type: "POST",
                success: function (response) {
                    if (response.code === 200 && response.data) {
                        updateDataSourceTable(response.data);
                    } else {
                        // 处理错误或者显示一些消息
                        console.error('获取数据失败:', response.msg);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    // 请求失败时的处理逻辑
                    console.error('请求数据源列表失败:', textStatus, errorThrown);
                }
            });
        }

        // 更新表格函数
        function updateDataSourceTable(data) {
            var tbody = $('#datasource-list');
            tbody.empty(); // 清空现有的数据

            data.forEach(function (dataSource) {
                var row = `<tr>
                <td>
                    <label class="lyear-checkbox checkbox-primary">
                        <input type="checkbox" name="ids[]" value="${dataSource.id}"><span></span>
                    </label>
                </td>
                <td>${dataSource.id}</td>
                <td>${dataSource.serverName}</td>
                <td>${dataSource.address}</td>
                <td>${dataSource.snmpPort}</td>
                <td>${dataSource.syslogPort}</td>
                <td>${dataSource.mibVersion}</td>
                <td>${dataSource.comVersion}</td>
                <td>
                    <div class="btn-group">
                        <a class="btn btn-xs btn-default" href="#!" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
                        <a class="btn btn-xs btn-default" href="#!" title="查看" data-toggle="tooltip"><i class="mdi mdi-eye"></i></a>
<!--                        <a class="btn btn-xs btn-default" href="#!" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>-->
                        <a class="btn btn-xs btn-default" href="#!" title="删除" data-toggle="tooltip" onclick="confirmDelete('${dataSource.serverName}', '${dataSource.id}')"><i class="mdi mdi-window-close"></i></a>
                    </div>
                </td>
            </tr>`;
                tbody.append(row);
            });
        }



        // 确认删除的函数，使用Bootstrap模态框
        function confirmDelete(name, id) {
            // 设置模态框消息并显示模态框
            $('#confirmModalBody').text('您确定要删除 "' + name + '" 这个服务器吗？');
            $('#confirmModal').modal('show');

            // 绑定点击事件到“确定”按钮上
            $('#confirmModalYes').off('click').on('click', function () {
                deleteDataSource(name, id);
                $('#confirmModal').modal('hide'); // 隐藏模态框
            });
        }


        // 发起删除数据源的 AJAX 请求的函数
        function deleteDataSource(name, id) {
            $.ajax({
                url: "/server/remove",
                type: "POST",
                contentType: "application/json", // 设置请求头内容类型为 JSON
                data: JSON.stringify({ "name": name, "id": id }), // 将对象转为 JSON 字符串
                success: function (response) {
                    if (response.code === 200) {
                        // 删除成功后的操作，比如重新加载数据源列表
                        fetchDataSourceList();
                        //alert(name + ' 数据源已成功删除。');
                    } else {
                        // 删除失败的操作
                        displayAlertModal('删除失败: ' + response.msg);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    // 请求失败时的处理逻辑
                    displayAlertModal('删除数据源请求失败: ' + textStatus);
                }
            });
        }

        // 显示提示模态框的函数
        function displayAlertModal(message) {
            $('#alertModalBody').text(message); // 设置提示消息
            $('#alertModal').modal('show'); // 显示模态框
        }

        $(document).ready(function () {
            //fetchServerTypes();
            //fetchApiServerUrl();
            // 绑定保存按钮的点击事件来提交表单
            $('#myModal .btn-primary').click(submitNewDataSource);

            // 页面加载完成后立即获取数据源列表
            fetchDataSourceList();
        });


    </script>

</body>

</html>